<template>

	<el-container class="home-container">
		<!--头部区域-->
		<el-header>超市进销存管理系统
			<div>
				<img
					src="../assets/logo.png"
					alt=""
				>
				<span>超市进销存管理系统</span>
			</div>
			<el-button
				type="info"
				@click="logout"
			>退出</el-button>
		</el-header>
		<!--页面主体区域-->
		<el-container>
			<!--侧边栏-->
			<el-aside width="200px">
				<!--侧边栏菜单区域-->
				<el-menu
					background-color="#545c64"
					text-color="#fff"
					active-text-color="#ffd04b"
					router
				>
					<!--一级菜单-->
					<el-submenu index="1">
						<!--一级菜单模板区-->
						<template slot="title">
							<!--图标-->
							<i class="el-icon-location"></i>
							<!--文本-->
							<span>
								<el-button @click="$router.replace('/st_st')">员工查看</el-button>
							</span>
						</template>
					</el-submenu>

					<el-submenu index="1">
						<!--一级菜单模板区-->
						<template slot="title">
							<!--图标-->
							<i class="el-icon-location"></i>
							<!--文本-->
							<span>
								<el-button @click="$router.replace('/st_go')">商品</el-button>
							</span>
						</template>
					</el-submenu>

					<el-submenu index="1">
						<!--一级菜单模板区-->
						<template slot="title">
							<!--图标-->
							<i class="el-icon-location"></i>
							<!--文本-->
							<span>
								<el-button @click="$router.replace('/st_pl')">采购主表</el-button>
							</span>
						</template>
					</el-submenu>

					<el-submenu index="1">
						<!--一级菜单模板区-->
						<template slot="title">
							<!--图标-->
							<i class="el-icon-location"></i>
							<!--文本-->
							<span>
								<el-button @click="$router.replace('/st_pd')">采购明细</el-button>
							</span>
						</template>
					</el-submenu>

				</el-menu>
			</el-aside>
			<!--右侧内容主题-->
			<el-main>
				<!--路由占位符-->
				<router-view>

				</router-view>
			</el-main>

		</el-container>
	</el-container>

</template>

<script>
export default {
	data(){
		return{
			msg:""
		};
	},
	

    methods: {
        logout(){
            window.sessionStorage.clear()
            this.$router.push('/')
        },
    }
}
</script>

<!--类选择器-->
<style scoped>
.el-header {
	background-color: rgb(34, 136, 136);
	display: flex;
	justify-content: space-between;
	padding-left: 0;
	align-items: center;
	color: #fff;
	font-size: 20px;
}
.el-aside {
	background-color: rgb(33, 156, 156);
}
.el-main {
	background-color: rgb(217, 235, 235);
}
.home-container {
	height: 100%;
}
</style>

